<template>
  <el-container class="main-container">
    <keep-alive>
      <Header :subtitle="subtitle" :header-height="headerHeight" :cover-name="coverName" />
    </keep-alive>
    <div class="main">
      <el-row>
        <div v-loading="listLoading" class="el-col-24 el-col-md-20 list">
          <el-row v-for="item in list" :key="item.id">
            <div class="el-col-24 el-col-md-18 list-item">
              <router-link :to="`/detail/${item.id}`">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="summary">
                  {{ item.synopsis }}
                </div>
              </router-link>
              <div>
                <i class="el-icon-riqi" />&nbsp;{{ formatTime(item.addTime) }}&nbsp;&nbsp;|&nbsp;&nbsp;
                <router-link :to="`/category/${item.cid}`">
                  <i class="el-icon-fenlei" /> {{ item.cateName }}
                </router-link>&nbsp;&nbsp;|&nbsp;&nbsp;
                <template v-for="(tag,index) in item.tags">
                  <router-link :key="index" :to="`/tag/${tag.id}`" class="tag">
                    <i class="el-icon-tag" /> {{ tag.title }}
                  </router-link>
                </template>&nbsp;
              </div>
            </div>
            <div class="el-col-18 list-divider">
              <el-divider />
            </div>
          </el-row>
        </div>
      </el-row>
      <el-row class="pagination">
        <button v-if="listQuery.page < pageCount" type="button" class="el-button next" @click="loadMore">
          Next
        </button>
      </el-row>
    </div>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script type="text/ecmascript-6">
import Header from '../components/Header'
import Footer from '../components/Footer'
import { parseTime } from '../utils/index'
import { getList } from '../api/blog'

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      subtitle: '冬天到了，春天还会远吗？',
      coverName: '/cover/cover1.jpg',
      headerHeight: 100,
      total: 0,
      pageCount: 0,
      listQuery: {
        page: 1
      },
      list: [],
      listLoading: true
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.pageCount = Math.ceil(this.total / 10)
        this.listLoading = false
      })
    },
    formatTime(time) {
      return parseTime(time, '{y}-{m}-{d}')
    },
    loadMore() {
      this.listLoading = true
      this.listQuery.page += 1
      getList(this.listQuery).then(response => {
        this.list = this.list.concat(response.data.data)
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    .main-container {
        background-color: #eeeeee;

        .main {
            max-width: 1140px;
            width: 100%;
            padding: 3rem 15px;
            margin-right: auto;
            margin-left: auto;
            position: relative;
            margin-top: -3rem;
            background-color: #fff;
            border-radius: .5rem;
            z-index: 3;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;
            box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;

            .list {
                float: none;
                margin: auto;

                .list-item {
                    float: none;
                    margin: 1em auto;

                    a {
                        cursor: pointer;
                        text-decoration: none;

                        &:hover {
                            color: #1abc9c
                        }

                        .title {
                            font-weight: 700;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-size: 1.5rem;
                            margin-bottom: .5rem;
                            line-height: 1.2;
                        }

                        .summary {
                            display: -webkit-box;
                            margin: .5rem 0;
                            height: auto;
                            max-height: 5rem;
                            line-height: 1.5rem;
                            overflow: hidden;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }
                    }

                    .tag {
                        margin-right: 15px;
                    }
                }

                .list-divider {
                    float: none;
                    margin: auto;
                }
            }

            .pagination {
                text-align: center;

                .next {
                    -webkit-transition: all .3s linear;
                    -o-transition: all .3s linear;
                    transition: all .3s linear;
                    outline: 0;
                    border: 0;
                    background-color: transparent;
                    font-size: .9rem;
                    color: #212529;
                    padding: 0 10px;
                    display: inline-block;
                    line-height: 35px;

                    &:hover {
                        -webkit-transition: all .3s linear;
                        -o-transition: all .3s linear;
                        transition: all .3s linear;
                        -webkit-border-radius: .125rem;
                        border-radius: .125rem;
                        background-color: #eee;
                    }
                }
            }
        }
    }
</style>
